<template>
	<view class="content">
		<uni-grid class="func-menu" :column="2" :square="true">
			<uni-grid-item v-for="(item, i) in menuItems" :key="i">
				<view class="menu-item" @click="jump(item.href)">
					<image :src="base + item.pic" mode="widthFix"></image>
					<text class="text">{{ item.title }}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script>
import { indexData, base } from '../../service/index.js';
export default {
	data() {
		return {
			base,
			menuItems: []
		};
	},
	async onLoad() {
		let data = await indexData();
		this.menuItems = data.menuItems;
		// console.log(this.menuItems);
	},
	methods: {
		jump(url) {
			// console.log(url);
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss">
.func-menu {
	background-color: $uni-bg-color;

	.menu-item {
		height: 100%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		> image {
			width: 35%;
			margin-bottom: $uni-spacing-col-lg;
		}
	}
}
</style>
